<template>
  <div class="productdetails">
     <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="item in gallery" :key="item.id">
            <img :src="item.img_url" alt="" width="100%" height="100%" style="height:300px">
        </van-swipe-item>
    </van-swipe>
    <Tips />
    <van-cell title="显示商品内容" is-link @click="skuShow"/>
     <!-- 猜你喜欢 -->
    <SearchProducts :goodsList="goodsList"/>
    <!-- 购物车底部组件 -->
    <AppGoodsAction  @gotoCart="gotoCart" :goodsCount="goodsCount" class="AppGoodsAction"/>
   <van-sku 
   ref="sku"
        v-model="show"
        :sku="sku"
        :goods="goods"
        :show-add-cart-btn=false
        buy-text="确定"
       
    />
  </div>
</template>

<script>
import {GetGoodListDetails,GetGoodsRelateData,AddProductToCart,GetGoodsCount} from "@/utils/api"
import Tips from "@/components/Tips"
import AppGoodsAction from "@/components/AppGoodsAction"
import SearchProducts from "@/components/SearchProducts"
export default {
    data(){
        return{
            gallery:[],
            goodsList:[],
            productList:[],
            show: false,
            goodsCount:0,
            aaa:"",
            // buy-text:"确定" ,
      sku: {
        // 数据结构见下方文档
        goods: {picture:''},
        tree: [],
        price: '', // 默认价格（单位元）
        stock_num: "", // 商品总库存  
        
        },
            goods: {
                // 数据结构见下方文档
            },
            messageConfig: {
                // 数据结构见下方文档
            },
      }
    },
    created(){
        GetGoodListDetails({id:this.$route.query.id}).then(res=>{
            console.log(res.data)
            // if(res.data.errno = 0){
                    let {gallery,info,attribute,issue,productList} = res.data.data
                    this.gallery = gallery
                    this.info = info
                    this.attribute = attribute
                    this.goods_desc = info.goods_desc
                    this.isue = issue
                    this.goods.picture = info.list_pic_url
                    this.sku.price = info.retail_price
                    this.sku.stock_num = info.goods_number
                    this.productList = productList
            // }
        }),

        //相关产品
        GetGoodsRelateData({
            id:this.$route.query.id
        }).then(res=>{
           
            console.log(res.data)
            this.goodsList = res.data.data.goodsList
        }),
        //产品数量
        GetGoodsCount().then(res=>{
            console.log(res);
            this.goodsCount = res.data.data.cartTotal.goodsCount
        })

    },
    methods:{
        skuShow(e){
            console.log(e)
            this.show = !this.show
        },
        gotoCart(){
          if(this.show){
                // 加入购物车
                console.log("执行加入购物车的操作");

                // 获取要添加的商品的数量
                // this.$refs.sku.getSkuData().selectedNum

                // 发起加入购物车请求
                AddProductToCart({
                    goodsId:this.$route.query.id,
                    productId:this.productList[0].id,
                    number:this.$refs.sku.getSkuData().selectedNum
                }).then(res=>{
                    if(res.data.errno==0){
                        console.log(res);
                        // 添加到购物车后做两件事情
                        // 1、更新购物车数量
                        this.goodsCount = res.data.data.cartTotal.goodsCount
                        // 2、跳转到购物车页面
                        this.$toast.success("加入购物车成功");
                        setTimeout(()=>{
                            this.$router.push("/cart")
                        },1500)
                    }
                })


            }else{
                 this.show = !this.show
            }
           
        },
      
    },
    components:{
        Tips,AppGoodsAction,SearchProducts
    }
}
</script>

<style lang="scss" scoped>
    .my-swipe .van-swipe-item {
    font-size: 20px;
    height: 300px;
    line-height: 150px;
    text-align: center;
   
  }
  .AppGoodsAction{
      
      z-index: 99999;
  }
</style>